<template>
  <div>
    <el-row>
      <!-- <h3>微信公众号开通和微信支付开通（点击标题下载）</h3> -->
      <el-table size="small" :data="filedown">
        <el-table-column label="序号" prop="id" align="center"></el-table-column>
        <el-table-column label="预览图" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="right">
              <div slot="content">
                <img :src="scope.row.img" alt="图片加载失败">
              </div>
              <img :src="scope.row.img" alt="图片加载失败">
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="文件名称" prop="name" align="center"></el-table-column>
        <el-table-column label="附件" align="center">
          <template slot-scope="scope">
            <svg-icon icon-class=""></svg-icon>
            <a :href="scope.row.url" :download="scope.row.name">{{ scope.row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- <el-row>
      <h3>营销后台操作文档（点击标题下载）</h3>
      <el-table size="small" :data="filedown">
        <el-table-column label="文档名称">
          <template slot-scope="scope">
            <svg-icon icon-class=""></svg-icon>
            <a :href="scope.row.url" :download="scope.row.name">{{ scope.row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column label="修改日期" prop="time"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
        <el-table-column label="大小" prop="size"></el-table-column>
        <el-table-column label="版本" prop="version"></el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <h3>微信相关（点击标题下载）</h3>
      <el-table size="small" :data="filedown">
        <el-table-column label="文档名称">
          <template slot-scope="scope">
            <svg-icon icon-class=""></svg-icon>
            <a :href="scope.row.url" :download="scope.row.name">{{ scope.row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column label="修改日期" prop="time"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
        <el-table-column label="大小" prop="size"></el-table-column>
        <el-table-column label="版本" prop="version"></el-table-column>
      </el-table>
    </el-row> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      filedown: [
        {
          id: '1',
          name: '13232',
          img: 'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=0015091d2a9759ee555066cb82fa434e/0dd7912397dda144a5db01a2beb7d0a20df486cb.jpg',
          url: 'http://baidu.com'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  h3{
    font-size: 14px;
  }
  .el-row{
    margin-bottom: 50px;
    .el-table{
      img{
        width: 200px;
        height: 90px;
      }
    }
  }
</style>
